<template>
  <Nav />
  <Menu />
  <div class="bg-img">
    <img src="@/assets/info1.jpg" alt="" />
  </div>
  <div class="info-menu">
    <div class="menu-left">
      <div class="menu-box">
        <!-- :class="key == 1 ? 'menu-item-active' : 'menu-item'"
          @click="key = 1" -->
        <div
          v-for="item in list"
          :key="item.id"
          :class="key == item.id ? 'menu-item-active' : 'menu-item'"
          @click="key = item.id"
        >
          {{ item.name }}
        </div>
      </div>
    </div>
    <div class="menu-right">
      <Teachers v-if="key == '5-0'" />
      <Leavel v-if="key == '5-1'" />
      <Degree v-if="key == '5-2'" />
    </div>
  </div>
  <Footer />
</template>
<script setup lang="ts">
import Nav from "../components/navBar.vue";
import Menu from "../components/menu.vue";
import Swiper from "../components/swiper1.vue";
import Teachers from "./teachers.vue";
import Leavel from "./level.vue";
import Degree from "./degree.vue";
import Footer from "../components/footer.vue";
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
const router = useRoute();
const key = ref("");
const list = ref();
// const key = router.query.key;
// const list = JSON.parse(String(router.query.list));
// console.log(key, "iiiiiddddd");
// console.log(list, "list");
onMounted(() => {
  key.value = String(sessionStorage.getItem("key"));
  list.value = JSON.parse(String(sessionStorage.getItem("list")));
  console.log(key.value, "list");
  if (key.value.length == 1) {
    key.value = list.value[0].id;
  }
});
// const list = ref(1);
// const list = [{}];
</script>

<style lang="scss" scoped>
.bg-img {
  width: 100%;
  img {
    width: 100%;
  }
}
.info-menu {
  width: 75rem;
  display: flex;
  .menu-left {
    width: 18.75rem;
    position: relative;
    .menu-box {
      width: 100%;
      position: absolute;
      // top: -4.375rem;
      top: 0.3125rem;
      border-radius: 0.3125rem;
      overflow: hidden;
      z-index: 9;

      .menu-item {
        width: 100%;
        height: 4.375rem;
        box-sizing: border-box;
        padding-left: 1.25rem;
        background-color: #f6f6f6;
        line-height: 4.375rem;
        cursor: pointer;
        z-index: 9;
        transition: 0.7s;
      }
      .menu-item-active {
        width: 100%;
        height: 4.375rem;
        box-sizing: border-box;
        padding-left: 1.25rem;
        background: linear-gradient(to right, #06458b, #8aaee6);
        // background: pink;
        color: #fff;
        line-height: 4.375rem;
        cursor: pointer;
        z-index: 9;
        transition: 0.7s;
      }
      .menu-item:hover {
        background: #d9e5f7;
        // color: #fff;
      }
    }
  }
  .menu-right {
    width: 56.25rem;
    min-height: 12.5rem;
    padding: 30px;
    p {
      font-size: 0.875rem;
      line-height: 1.875rem;
      margin: 0.3125rem 0;
    }
  }
}
</style>
